<template>
  <view class="custom-navbar">
    <button v-if="hasBack" :class="['custom-back-button', `bg-type-${buttonBgType}`]" @click="goBack">返回</button>
    <view class="title">{{ title }}</view>
  </view>
</template>

<script>
  export default {
    name: 'custom-navbar',
    props: {
      title: {
        type: String,
        default: ''
      },
      hasBack: {
        type: Boolean,
        default: true // 默认显示返回按钮
      },
      buttonBgType: {
        type: String,
        default: "1" // 默认背景类型
      }
    },
    methods: {
      goBack() {
        const pages = getCurrentPages();
        console.log('当前页面栈:', pages); // 日志调试
        this.$tab.reLaunch('/pages/index')
        //uni.navigateBack();
      }
    }
  };
</script>

<style scoped>
  .custom-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 36%;
    display: flex;
    align-items: center;
    color: #ffffff;
    padding: 10px;
    z-index: 1000;
  }

  .custom-back-button {
    background: none;
    text-indent: -99em;
    width: 60px;
    height: 60px;
    border: none;
    color: #ffffff;
    font-size: 16px;
    padding: 0px;
    cursor: pointer;
    background-size: cover;
    margin-top: 21px;
  }

  .bg-type-1 {
    background: url('/static/images/back.png') no-repeat  ; background-size: cover;
  }

  .bg-type-2 {
    background: url('/static/images/back2.png') no-repeat;background-size: cover;
  }

  .bg-type-3 {
    background: url('/static/images/back3.png') no-repeat;background-size: cover;
  }

  .bg-type-4 {
    background: url('/static/images/back4.png') no-repeat;background-size: cover;
  }

  .title {
    margin-left: 10px;
    font-size: 16px;
    font-weight: bold;
  }
</style>
